<template>
    <div class="contain">
        <div class="header">
            <el-button type="primary" @click="addCard()">添加项目</el-button>
            <span class="export-span" v-if = "multipleSelection.length != 0">
                <form :action="url" method="get" >
                     <button class="export" type="submit">批量导出</button>
                     <input type="hidden" name="ids" :value="multipleSelection" />
                     <input type="hidden" name="sessionId" :value="sessionId" />
                </form>
            </span>
            <span  class="export-span" v-else>
                <button class="export" type="submit" @click="check">批量导出</button>
                <input type="hidden" name="ids" :value="multipleSelection" />
            </span> 
            <el-button type="primary" @click="()=>{this.dialogVisible = true}">批量导入</el-button>
        </div>
        <div class="input_modal">         
            <div class="input-item">
                <span>请输入项目名称：</span>
                <el-input v-model="projectName" placeholder="请输入关键字" class="proName"  @keyup.enter.native="search"></el-input>  
            </div>
            <div class="input-item">
                <span>项目阶段：</span>
                <el-select filterable v-model='phaseCode'  placeholder='-请选择-'>
                    <el-option  label="全部" value=""></el-option>
                    <el-option   v-for="item in phaseArr"   :key="item.key"   :label="item.value"  :value="item.key"></el-option>
                </el-select>
            </div>
            <div class="input-item">
                <el-button type="primary" @click="getinformList">查询</el-button>
            </div>
            
        </div>
        <div class="table-content">
            <el-table  v-loading="loading" @selection-change="selectTable" :data="informList"  style="width: 100%;text-align:center"   :border='true' >
                <el-table-column  fixed="left" 
                    type="selection" min-width='100' align="center">
                </el-table-column>
                <el-table-column prop="projectName"  label="项目名称"></el-table-column>
                <el-table-column prop="levelName"  label="项目等级"></el-table-column>
                <el-table-column prop="phaseName"  label="项目阶段"></el-table-column>
                <el-table-column prop="typeName"  label="项目类型"></el-table-column>
                <!-- <el-table-column prop="groupName"  label="项目组别"></el-table-column> -->
                 <el-table-column prop="groupName"   label="荣誉徽章" >
                     <template slot-scope="scope">
                       {{scope.row.efficiencyName?scope.row.efficiencyName:''}} 
                    </template>
                  </el-table-column>
                <el-table-column prop="totalScore"  label="项目分值"></el-table-column>
                <el-table-column  prop="id"  label="操作" fixed="right" width='220px'>
                    <template slot-scope="scope">
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="addDetail(scope.row.id)">打分</el-button>
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="addCard(scope.row.id)">编辑</el-button>
                        <el-button style="margin-bottom:10px" type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
                        <!-- <span v-if="tableData[scope.$index].status == 'VERIFIED'">已核实</span> -->
                    </template> 
                  </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="批量导入"
                :visible.sync="dialogVisible" :before-close="handleClose"
                size="tiny">
            <div class="upload-export">
                <div>注意事项</div>
                <ul>
                    <li>1.导入的数据文件必须为可识别的Excel文件，后缀名为.xls，且文件大小不多于2M。</li>
                    <li>2.不可导入已有的信息。</li>
                    <li>3.Excel表字段格式必须和后台字段保持一致。</li>
                </ul>
                <el-form label-width="150px">
                    <el-form-item label="文件：" >
                        <el-upload
                        :file-list="fileList"
                            class="files-upload"
                            ref="upload" accept=".xls,.xlsx"
                            :action="importUrl" name="file" :limit="1" 
                            :auto-upload="false" :on-exceed="handExceed" :on-success="handUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过10Mb&nbsp;&nbsp;<a href="https://file.icebartech.com/icebartech-roe/136.xlsx" download="项目信息导入模板.xlsx" >点此下载导入模板</a></div>
                            <div slot="tip" class="el-upload__tip" style="color:#fc0000;">注：上传资料内容的格式，请严格参照模板示例填写</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-alert v-if="null != importDescription"
                    :title="importDescription.title"
                    :type="importDescription.type" close-text="知道了"
                    :description="importDescription.description"
                    show-icon @close="importDescription.closeFunc">
                </el-alert>
                <!-- <ul class="upload-list">
                    <li v-for="(item, index) in fileList" :key="index">
                        <a :href="item.url" target="_blank">{{item.name}}</a>
                    </li>
                </ul> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleConfirm">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <div class="pagination">
            <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,50,100]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
        
    </div>
</template>
<script>
    let CONSTANT = require("../../constant/constant.js");
    let common = require("../../common.js");
    export default{
        data(){
            return {
                pageCount:null,
                pageIndex:1,
                pageSize:10,
                informList:[],
                allThemeList:[],
                importTemplateUrl:'',
                importDescription:null,
                dialogVisible:false,
                importUrl:'',
                themeList:[],
                projectName:'',
                phaseCode:'',
                loading: true,
                phaseArr:[],
                multipleSelection:[],
                url:'',
                sessionId:'',
                fileList:[]
            }
        },
        mounted() {
            this.sessionId = sessionStorage.getItem('sessionId');
            this.url = CONSTANT.URL.PROJECT.EXCEL;
            this.importUrl = CONSTANT.URL.PROJECT.IMPORT+'?sessionId='+this.sessionId ;
            this.getinformList();   //分页获取资讯列表
            this.getDictArr()
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            check:function(){
                this.$message({
                    type: 'warning',
                    message: '请先选择'
                });
            },
            handleConfirm() {
                this.dialogVisible = false
                this.fileList = []
            },
            selectTable(val) {
                this.ids = []
                this.multipleSelection = []
                val.map( item => {
                    this.ids.push(item.id)
                    this.multipleSelection.push(item.id)
                })
            },
            handExceed(files, fileList){
                 console.log(files,'files')
                var temp = {};
                temp.title = '选择文件错误';
                temp.type = 'warning';
                temp.description = '请先清除已选择的文件再选择新文件！';
                temp.closeFunc = () => {this.importDescription=null;}
                this.importDescription = temp;
            },
            handUploadSuccess(response, file, fileList){
                console.log(response,'AAA')
                var temp = {};
                if(response.status == 1) {
                    temp.title = '导入成功';
                    temp.type = 'success';
                    temp.description = '导入成功，关闭后自动刷新';
                    console.log('success')
                    temp.closeFunc = () => {this.importDescription=null;this.dialogFormVisible=false;this.getList();}
                } else {
                    temp.title = '导入失败';
                    temp.type = 'error';
                    temp.description = response.msg;
                    temp.closeFunc = () => {this.importDescription=null;}
                }
                this.importDescription = temp;
            },
            handleClose(){
                this.dialogVisible = false;
                this.importDescription=null;
                this.dialogFormVisible=false;
                this.$refs.upload.uploadFiles.pop();
            },
            getDictArr(){
                let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY;
                let data = {} ;
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    this.phaseArr = res.data.bussData.phase
                }) 
                
            },
            getinformList(){
                 this.loading = true;
                let url = CONSTANT.URL.PROJECT.FINDPROJECTBYPAGE;
                let data = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    projectName:this.projectName?this.projectName:null,
                    phaseCode:this.phaseCode?this.phaseCode:null
                };
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                     this.loading = false;
                    let data = res.data.bussData;
                    this.informList = data;
                    this.pageCount = res.data.count
                    console.log('所有数据',data);
                }) 
            },

            //删除
            deleteItem(id){
                this.$confirm('确定删除?', '提示', {           
                    confirmButtonText: '确定',           
                    cancelButtonText: '取消',           
                    type: 'warning'         
                }).then(() => {           
                    let  url = CONSTANT.URL.PROJECT.DELETE;
                    let data = {id:id} ;
                    common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                type:'success',
                                message:'删除成功!'
                            });
                            this.getinformList();
                        }
                        else{
                            this.$message({
                                type:'warning',
                                message:res.msg
                            })
                        }
                    })      
                    }).catch(() => {           
                        this.$message({             
                        type: 'info',             
                        message: '已取消删除'           
                    });                   
                });
            },
            //新增编辑
            addCard(id){
                this.$router.push({path:'/projectEdit',query:{'id':id}});
            },
            addDetail(id){
                this.$router.push({path:'/projectDetail',query:{'id':id}});
            },
            handleSizeChange(val) {
                this.pageSize= val;
                this.getinformList();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getinformList();
            },
            handleSelectionChange(val) { 
            
            },
        },
    }
</script>

<style lang="scss">
.contain {
  .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
  .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{ 
          width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
          li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
          li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
            .sort_name{ font-weight: 600;margin-bottom: 5px;}
            .group-list{ padding-left: 20px;
                .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
            }
        }
      }
      .el-button--default{background-color: #fff !important;}
  }
}
</style>